<template>
	<view class="wrap">
		<view class="wrap-list">
			<block v-for="(item, index) in list" :key="index">
				<view class="item">
					<view class="avatar-nickname flex align-center">
						<image class="avatar" :src="$getImageURL(item.user.avatar)" />

						<view class="nickname limit-num-line f-28">{{ item.user.nickname }}</view>
					</view>

					<view class="time-price flex align-center just-between">
						<view class="time f-26">领取时间:{{ item.createtime_text }}</view>

						<view class="price f-28" v-if="item.type == 0">¥{{ item.money }}</view>
					</view>
				</view>
			</block>
		</view>

		<wanl-empty v-if="list.length === 0" />
	</view>
</template>

<script>
	import { getBonusReceiveLog } from "@/API/article.js";
	export default {
		data() {
			return {
				article_id: "",
				bonus_id: "",

				page: 1,
				total: 0,
				list: [],
			};
		},
		onLoad(options) {
			this.article_id = options.article_id;
			this.bonus_id = options.bonus_id;

			this.onRefresh();
		},
		onPullDownRefresh() {
			this.onRefresh();
		},
		onReachBottom() {
			if (this.list.length < this.total) {
				this.page++;
				this.getData();
			}
		},
		methods: {
			/**
			 * 刷新
			 */
			onRefresh() {
				this.page = 1;
				this.getData();
			},
			/**
			 * 网络请求
			 */
			getData() {
				getBonusReceiveLog({
					page: this.page,
					article_id: this.article_id,
					bonus_id: this.bonus_id,
				}).then((res) => {
					this.total = res.data.total;
					const list = res.data.data;
					if (this.page === 1) {
						this.list = list;
					} else {
						this.list = this.list.concat(list);
					}
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.wrap {
		padding: 20rpx 0rpx;
		box-sizing: border-box;

		.wrap-list {
			padding: 0 25rpx;
			width: 100%;
			box-sizing: border-box;
			overflow: hidden;

			.item {
				width: 100%;
				background-color: white;
				overflow: hidden;
				border-radius: 16rpx;
				padding: 0 25rpx;
				box-sizing: border-box;
				margin-bottom: 20rpx;

				.avatar-nickname {
					width: 100%;
					padding: 20rpx 0rpx;
					box-sizing: border-box;
					border-bottom: 2rpx solid #eee;
					gap: 20rpx;

					.avatar {
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
						overflow: hidden;
					}

					.nickname {
						--limit-num: 1;
						color: #121212;
					}
				}

				.time-price {
					width: 100%;
					overflow: hidden;
					padding: 20rpx 0rpx;
					box-sizing: border-box;

					.time {
						flex: 1;
						--limit-num: 1;
						color: #888888;
					}

					.price {
						color: $theme-color;
					}
				}
			}
		}
	}
</style>
